<template>
	<div class="coupon-list">
		<list-title :data="header"></list-title>
		<list-table :list="couponTplList" :tableLoading="tableLoading" :footer="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="couponname" label="优惠券名称"></el-table-column>
				<el-table-column label="条件">
					<template slot-scope="scope">
						<span>满足{{ scope.row.condition_amount }}元</span>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column label="发行量/已领取">
					<template slot-scope="scope">
						<span>{{ scope.row.circulation }}</span> / <span>{{ scope.row.receive_num }}</span>
					</template>
				</el-table-column>
				<el-table-column label="有效期" width="280px">
					<template slot-scope="scope">
						<span>{{ scope.row.begin_time }}</span> ~ <span>{{ scope.row.end_time }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="add_time" label="开通时间" width="150px"></el-table-column>
				<el-table-column label="操作" width="50">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {judgeAuth} from "static/js/common.js"
import {domain} from '@/api';
import {mapGetters} from 'vuex'

export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '优惠券规则列表',
				reload: true,
				buttons: [
					{
						title: '添加规则',
						type: 'primary',
						pathName: 'pc/general/coupon/Coupon',
						auth: false,
					}
				]
			},
			/*列表数据*/
			couponTplList: [
				// {
				// 	id: 1,
				// 	couponname: '优惠券名称',
				// 	condition_amount: 0,#满足说明条件
				// 	remark: '描述',
				// 	circulation: 100,
				// 	receive_num: 10,
				// 	begin_time: '',
				// 	end_time: '',
				// 	add_time: '',
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('addCouponTpl', this.allMenuList) == undefined)?false:true
		/*获取列表数据*/
		this.getCouponTplList()
	},
	methods: {
		/*获取操作列表*/
		getCouponTplList: function(){
			this.$baseURL(domain.ac)
			this.$get(this.$api.couponTplList).then(res => {
				// console.log(res.data);
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code === 0){
					if(res.data.data.list != undefined){
						this.couponTplList = []
						Object.keys(res.data.data.list).forEach((k) => {
							this.couponTplList.push ({
								id: res.data.data.list[k].cid,
								couponname: res.data.data.list[k].couponname,
								condition_amount: res.data.data.list[k].condition_amount,
								remark: res.data.data.list[k].remark,
								circulation: res.data.data.list[k].circulation,
								receive_num: res.data.data.list[k].receive_num,
								begin_time: res.data.data.list[k].begin_time,
								end_time: res.data.data.list[k].end_time,
								add_time: res.data.data.list[k].add_time
							});
						})
						this.pagination = res.data.data.pageInfo
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*编辑客户*/
		handleEdit(index, row) {
			// console.log(row.id);
			this.$router.push({ name: 'pc/general/coupon/Coupon', query: {id: row.id}})
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
</style>